<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./jquery.min.js"></script>
  </head>
  <body>
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
    </ul>
    <script>
      // jq 会有2个大的特点 1. 隐式迭代 2.链式操作；
      // 筛选器
      // 1.获取第一个元素；
      // 原生的js所有的都是赋值操作
      // document.onclick = function(){

      // }

      // jq操作都是函数操作 ：
      // 1.first：获取第一个元素
      // $(document).click(function(){
      //     // $("li:first")
      //     // 链式操作
      //     $("li").first().css("color","red");

      // })

      // 2.获取最后一个元素 last
      // $(document).click(function(){
      //     $("li").last().css("color","red");
      // })

      // 3.选取指定的元素  eq
      // $(document).click(function(){
      //     $("li").eq(1).css("color","red");
      // })

      // 4.元素的回滚 end
      document.onclick = function () {
        $("li").eq(1).eq(0).end().end().css("color", "red");
      };

      // 5.查找下一个兄弟元素 next
      // document.onclick = function(){
      //     $("li").eq(1).next().css("color","blue");
      // }

      // 6.查找上一个兄弟元素  prev
      //   document.onclick = function () {
      //     $("li").eq(1).prev().css("color", "red");
      //   };
    </script>
  </body>
</html>
